<template>
  <div class="insuranceAudit">
    <div class="main">
      <div class="main_top">
        <el-form :inline="true" :model="filter" class="demo-form-inline">
          <el-form-item label="参保店铺名称：">
            <el-input v-model="filter.shopName" style="width: 220px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="配置时间：">
            <el-date-picker v-model="createTime" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="审核时间：">
            <el-date-picker v-model="changeTime" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="Search">搜索</el-button>
            <el-button @click="setReset">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- <div>
          <export-excel-button title="保险承保卡明细列表" action="/insurance/card/v1/export" :params="ExportParams" />
        </div> -->
      </div>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:configurator="{ scope }">
          <p>{{scope.row.configurator}}</p>
          <p v-if="scope.row.configuratorPhone">（{{scope.row.configuratorPhone}}）</p>
        </template>
        <template v-slot:originalStartTime="{ scope }">
          <p>{{scope.row.originalStartTime}}</p>
          <p>{{scope.row.originalEndTime}}</p>
        </template>
        <template v-slot:changeStartTime="{ scope }">
          <p>{{scope.row.changeStartTime}}</p>
          <p>{{scope.row.changeEndTime}}</p>
        </template>
        <template v-slot:reviewedBy="{ scope }">
          <p v-if="scope.row.reviewedBy==''">-</p>
          <p>{{scope.row.reviewedBy}}</p>
          <p v-if="scope.row.reviewedByPhone">（{{scope.row.reviewedByPhone}}）</p>
        </template>
        <template v-slot:statusDict="{ scope }">
          <span style="margin-right: 5px">{{scope.row.statusDict}}</span>
          <el-tooltip class="elTooltip" effect="dark" :content="scope.row.reason" placement="top"
            v-if="scope.row.status==3">
            <span class="el-icon-question"></span>
          </el-tooltip>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button type="text" @click="examine(scope.row.id)" v-if="scope.row.status==1">审核</el-button>
          <el-button type="text" @click="examine(scope.row.id)" v-if="scope.row.status!=1" :disabled='true'>审核
          </el-button>
        </template>
      </ex-table>
    </div>
    <el-dialog title="商家保险审核" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="审核结果:" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">拒绝通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="拒绝原因:" prop="reason" v-if="ruleForm.status==3">
          <el-input type="textarea" v-model="ruleForm.reason" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sumitOpen('ruleForm')" :loading="buttonLoding">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>
<script>
  // import { mapState } from "vuex";
  // components

  import ExportExcelButton from "@/components/ExportExcelButton/index";
  // api
  import {
    adminDict
  } from "@/api/setting";
  import {
    insuranceAuditList,
    insuranceAuditAudit
  } from "@/api/insuranceUnderwriting";

  // mixins
  import handlePageMixin from "@/mixins/handlePageMixin";

  export default {
    name: "NewIncreaseVerify",
    components: {
      ExportExcelButton
    },
    mixins: [handlePageMixin],
    computed: {
      ExportParams() {
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };
        return params;
      },
    },
    data() {
      const validatePurchaseType = (rule, value, callback) => {
        // debugger
        if (this.ruleForm.status == 3) {
          if (value != undefined && value != null && value != '') {
            callback()
          } else {
            callback(new Error('请输入拒绝理由'))
          }
        } else {
          callback()
        }
      }
      return {
        id: '',
        createTime: [], //配置时间
        changeTime: [], //审核时间
        loading: false,
        tableColumn: [{
            prop: "shopName",
            label: "参保店铺名称",
            width: 160,
          },
          {
            label: "配置人",
            width: 140,
            slotName: "configurator",
            slot: true,
          },
          {
            prop: "createTime",
            label: "配置时间",
            width: 160,
          },
          {
            prop: "originalTotal",
            label: "原保额",
            width: 120
          },
          {
            prop: "changeTotal",
            label: "变动保额",
            width: 120
          },
          {
            label: "原保期",
            width: 140,
            slotName: "originalStartTime",
            slot: true,
          },
          {
            label: "变动保期",
            width: 120,
            slotName: "changeStartTime",
            slot: true,
          },
          {
            label: "审核人",
            width: 150,
            slotName: "reviewedBy",
            slot: true,
          },
          {
            prop: "updateTime",
            label: "审核时间",
            width: 120
          },
          {
            label: "审核状态",
            slot: true,
            slotName: "statusDict",
            width: 150
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            fixed: "right",
          },
        ],
        filter: {
          merchantId: '', //商家id
          createStartTime: '', //配置开始时间
          createEndTime: '', //配置结束时间
          changeStartTime: '', //审核开始时间
          changeEndTime: '', //审核结束时间
          shopName: '', //参保店铺名称
        },
        tableData: [], //数据列表
        total: '', //总数
        dialogVisible: false, //弹窗
        ruleForm: {
          id: '',
          status: '', //审核状态 （2 审核通过 3 未通过审核）
          reason: '', //拒绝理由
        },
        rules: { //表单校验规则
          reason: [{
            message: '请输入拒绝理由',
            trigger: ['change', 'bulr'],
            validator: validatePurchaseType
          }, ],
          status: [{
            required: true,
            message: '请选择审核结果',
            trigger: ['change', 'bulr']
          }],
        },
        buttonLoding: false,
      };
    },

    created() {
      this.getList();
    },
    methods: {
      //审核
      examine(id) {
        this.dialogVisible = true
        this.ruleForm.id = id
        this.ruleForm.reason = ''
        this.$refs['ruleForm'].resetFields();
      },
      //列表tablDA
      getList() {
        this.loading = true;
        if (this.createTime == null) {
          this.createTime = []
        }
        if (this.changeTime == null) {
          this.changeTime = []
        }
        this.filter.createStartTime = this.createTime[0]
        this.filter.createEndTime = this.createTime[1]
        this.filter.changeStartTime = this.changeTime[0]
        this.filter.changeEndTime = this.changeTime[1]
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };

        insuranceAuditList(params)
          .then((res) => {
            const {
              total,
              records
            } = res.result;
            records.forEach((item) => {
              if (item.updateTime == '') {
                item.updateTime = '-'
              }
            });
            this.$refs.table.pageOptions.total = total;
            this.tableData = records;
          })
          .finally(() => {
            this.loading = false;
          });
      },

      //重置
      setReset() {
        this.filter = {};
        this.createTime = []
        this.changeTime = []
        this.pageOptions.pageNum = 1;
        // this.currentNavtab = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      //搜索
      Search() {
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      sumitOpen(formName) { //审核确认
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.buttonLoding = true
            var data = {
              ...this.ruleForm,
            }
            insuranceAuditAudit(data).then((res) => {
              this.$message.success('操作成功');
              this.setReset()
              setTimeout(() => {
                this.dialogVisible = false
                this.buttonLoding = false
              }, 800)
            }).finally(() => {
              setTimeout(() => {
                this.buttonLoding = false;
              }, 1000);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
  };

</script>

<style lang="scss" scoped>
  @import "./style/insuranceAudit";

</style>
